<template>
	<view class="list">
		<GoodsList :hotGoods='hotGoods' @itemClick="goDetail"></GoodsList>
		<view class="flag" v-if="flag">
			--------我是有底线的--------
		</view>
	</view>
</template>

<script>
	import GoodsList from "../../components/goodsList/goodsList.vue"
	export default {
		data() {
			return {
				page: 1,
				hotGoods: [],
				flag: false
			}
		},
		onLoad() {
			this.getHotGoods()
		},
		onPullDownRefresh() {
			this.page = 1
			this.hotGoods = []
			setTimeout(() => {
				this.getHotGoods(() => {
					uni.stopPullDownRefresh()
				})
			}, 500)
		},
		onReachBottom() {
			// 如果商品数组的长度比当前页面*10小的话，就显示我是有底线的  比如数组中有15个数据，当前页面更新到2了，15<20
			if (this.hotGoods.length < this.page * 10) {
				this.flag = true
			}
			this.page++
			this.getHotGoods()
		},
		methods: {
			async getHotGoods(cb) {
				const res = await this.$myRequest({
					url: '/api/getgoods?pageindex=' + this.page
				})
				this.hotGoods = [...this.hotGoods, ...res.data.message]
				cb && cb()
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/goodDetail/goodDetail?id=' + id
				})
			}
		},
		components: {
			GoodsList
		}
	}
</script>

<style lang="scss">
	.list {
		background-color: #eee;

		.flag {
			text-align: center;
			color: #999;
			padding: 10px 0;
		}
	}
</style>
